import { ref } from "vue";

export const usePieChartOption = () => {
  const option = ref({
    title: {
      text: "",
      show: true,
      x: "center",
      y: "center",
      textStyle: {
        rich: {
          a: {
            fontSize: 20,
            color: "#03a9f4",
            padding: [0, 0, 25, 0]
          },
          b: {
            fontSize: 30,
            color: "#03a9f4",
            fontFamily: "alibabaPuhuiM"
          }
        }
      }
    },
    polar: {
      center: ["50%", "50%"],
      radius: ["60%", "75%"]
    },
    angleAxis: {
      max: 100,
      show: false
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(19, 84, 146, .4)"
        },
        data: [],
        coordinateSystem: "polar",
        itemStyle: {
          color: "#005DCF"
        }
      },
      {
        name: "",
        type: "gauge",
        radius: "54%",
        axisLine: {
          lineStyle: {
            color: "rgba(0, 182, 253, .4)",
            width: 1
          }
        },
        axisLabel: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        itemStyle: { show: false },
        detail: { show: false },
        data: [],
        pointer: { show: false }
      }
    ]
  });

  return { option };
};

export const useBarChartOption = () => {
  const option2 = ref({
    xAxis: [
      {
        type: "category",
        data: [],
        axisPointer: { type: "shadow" },
        splitLine: { show: false }
      }
    ],
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: { color: "#ccc", width: 1 }
      }
    },
    series: [
      {
        type: "bar",
        name: "总批次",
        data: [{ name: "itemA", value: 55 }],
        label: { show: true, position: "top" },
        itemStyle: { color: "#03a9f4" },
        axisLabel: {
          formatter: "{value}%",
          style: { fill: "#fff" }
        },
        axisTick: {
          style: { stroke: "#fff" }
        },
        animationCurve: "easeInOutBack"
      }
    ]
  });

  return { option2 };
};
